<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Regular.js • event</title>
    <script src="../../dist/regular.js"></script>

  </head>
  <body>
    
    <div id="app" class='container'></div>
    <!-- Templates -->
    <script id="event" type="text/regular">
      <div style="margin-top:20px">
        <div on-click={{click = click + 1}}> click{{ click|min }} </div>
        <div on-hold={{hold = hold + 1}}> hold{{ hold }} </div>
      </div>
    </script>

    <script>

    Regular.filter('min', function(value){

      return Math.min(value, 1)

    }).event('hold', function(elem, fire){

    })

    var App = Regular.extend({template: '#event'});

    App.event('hold', function(elem, fire){
      var tid;
      Regular.dom.on(elem, 'mousedown', function down(ev){
        tid = setTimeout(function(){
          fire(ev)
        }, 200); 
      })
      Regular.dom.on(elem, 'mouseup', function up(ev){
        clearTimeout(tid);
      })
      return function destroy(){
        Regular.dom.off(elem, down);
        Regular.dom.off(elem, up);
      }
    }).filter('min', function(value){
      return Math.min(value, 10)
    })

    var app = new App({data:{hold: 0, click: 0}}).inject("#app");

    var app2 = new Regular({
      template: '#event',
      data:{
        hold: 0, click: 0
      }
    }).inject("#app");

    </script>
  </body>
</html>
